<template>
  <div style="margin-left: auto">
    <p>退货通知单</p>
  </div>

  <div style="right: auto">
    <span>
      <el-button type="primary" @click="SalesOrderAdd()">保存</el-button>
    </span>
  </div>

  <hr />
  <el-scrollbar style="height: 320px; color: dimgray">
    <div class="scrollbar-flex-content">
      <p class="scrollbar-demo-item">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="单据编码：" style="width: 308px" disabled="true">
            <el-input
              v-model="form.returnNumber"
              placeholder=""
              disabled="true"
            />
          </el-form-item>

          <el-form-item label="单据日期：" style="width: 308px">
            <el-date-picker v-model="form.documentsDate" type="date" />
          </el-form-item>

          <el-form-item label="单据状态：" style="width: 308px">
            <el-select v-model="form.documentstatus" disabled="true">
              <el-option label="开立" value="开立" />
              <el-option label="审核" value="审核" />
              <el-option label="返回" value="返回" />
            </el-select>
          </el-form-item>

          <el-form-item label="业务状态：" style="width: 308px">
            <el-select v-model="form.businessstateId">
              <el-option label="正常" value="正常" />
              <el-option label="挂起" value="挂起" />
              <el-option label="手工关闭" value="手工关闭" />
              <el-option label="系统关闭" value="系统关闭" />
            </el-select>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="业务类型：" style="width: 308px">
            <el-select v-model="form.businessTypeId">
              <el-option label="普通退货" value="普通退货" />
              <el-option label="直运退货" value="直运退货" />
            </el-select>
          </el-form-item>

          <el-form-item label="操作员：" style="width: 308px">
            <el-input v-model="form.operator" disabled="true" />
          </el-form-item>

          <el-form-item label="审核员：" style="width: 308px">
            <el-input disabled="true" />
          </el-form-item>

          <el-form-item label="审核日期：" style="width: 308px">
            <el-date-picker type="date" disabled="true" />
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="仓库：" style="width: 308px">
            <el-select v-model="form.warehouseld">
              <el-option label="成品仓" value="成品仓" />
            </el-select>
          </el-form-item>

          <el-form-item label="客户名称：" style="width: 308px">
            <el-input v-model="form.clientName" disabled="true" />
          </el-form-item>

          <el-form-item label="退货原因：" style="width: 308px">
            <el-select v-model="form.returnReason">
              <el-option label="外观问题" value="外观问题" />
              <el-option label="质量问题" value="质量问题" />
            </el-select>
          </el-form-item>

          <el-form-item label="处理方式：" style="width: 308px">
            <el-select v-model="form.processing">
              <el-option label="无" value="无" />
              <el-option label="计划生产" value="计划生产" />
            </el-select>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="备注信息：" style="width: 308px">
            <el-input v-model="form.remark" />
          </el-form-item>
        </el-form>
      </p>
    </div>
  </el-scrollbar>

  <el-button type="primary" @click="form1.dialogTableVisible111 = true"
    >引入</el-button
  >

  <!-- 退货物料表 -->
  <table style="border-collapse: collapse">
    <tr>
      <td>序号</td>
      <td>销售单号</td>
      <td>发货单号</td>
      <td>物料编码</td>
      <td>物料名称</td>
      <td>型号规格</td>
      <td>主计量</td>
      <td>数量</td>
      <td>入库数量</td>
      <td>批号</td>
      <td>备注</td>
      <td>操作</td>
    </tr>
    <tr v-for="(ruleForm, index) in loge.healthArray">
      <td>
        {{ ruleForm.salesOrderId }}
      </td>
      <td>
        {{ ruleForm.xsDocumentNumber }}
      </td>
      <td>
        {{ ruleForm.fhDocumentNumber }}
      </td>
      <td>
        {{ ruleForm.itemBianma }}
      </td>

      <td>
        {{ ruleForm.materialName }}
      </td>
      <td>
        {{ ruleForm.typeSpecification }}
      </td>

      <td>
        {{ ruleForm.documentType }}
      </td>
      <td>
        {{ ruleForm.quantity }}
      </td>
      <!-- 入库数量 -->
      <td>
        {{ ruleForm.beginNumbere }}
      </td>
      <!-- 批号 -->
      <td>
        <el-input v-model="ruleForm.piHao" style="width: 100px"> </el-input>
      </td>
      <!-- 备注 -->
      <td>
        <el-input v-model="ruleForm.remark" style="width: 100px"> </el-input>
      </td>
      <td>
        <el-link style="color: red" @click="del">删除</el-link>
      </td>
    </tr>
  </table>

  <!-- 出库信息弹出框 -->
  <div>
    <el-dialog
      v-model="form1.dialogTableVisible111"
      title="销售退货"
      width="1000"
    >
      <el-form :inline="true" :model="Materials" class="demo-form-inline">
        <el-form-item label="销售订单号">
          <el-input v-model="Materials.documentNumber" />
        </el-form-item>
        <el-form-item label="发货单号">
          <el-input v-model="Materials.documentNumbers" />
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="Materials.clientName" />
        </el-form-item>
        <el-button type="primary" @click="SearchMaterialsShow">搜索</el-button>
      </el-form>

      <el-table
        :data="MaterialsShowlist"
        style="height: 500px"
        @selection-change="handleSelectionchange"
      >
        <el-table-column
          property="fhDocumentNumber"
          label="发货单号"
          width="150"
        />
        <el-table-column
          property="customerProfileName"
          label="客户"
          width="150"
        />
        <el-table-column property="itemBianma" label="物料编码" width="150" />
        <el-table-column property="materialName" label="物料名称" width="150" />
        <el-table-column property="documentType" label="主计量" width="150" />
        <el-table-column
          property="typeSpecification"
          label="行为规格"
          width="150"
        />
        <el-table-column property="deliverydate" label="发货日期" width="150" />
        <el-table-column property="quantity" label="发货数量" width="150" />
        <el-table-column property="" label="已退数量" width="150" />
        <el-table-column property="" label="未退数量" width="150" />
        <el-table-column type="selection" width="55" />
      </el-table>
      <el-button type="primary" @click="QueDing()">确定</el-button>
      <!-- 分页 -->
      <div>
        <tr>
          <td>
            <el-pagination
              v-model:current-page="Materials.PageIndex"
              v-model:page-size="Materials.PageSize"
              :page-sizes="[10, 20, 30, 40, 50]"
              :background="true"
              layout="total, slot, prev, pager, next"
              :total="Materials.totalCount"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </td>
          <td>
            <el-pagination
              v-model:current-page="Materials.PageIndex"
              v-model:page-size="Materials.PageSize"
              :page-sizes="[10, 20, 30, 40, 50]"
              :background="true"
              layout="slot, sizes, jumper"
              :total="Materials.totalCount"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </td>
        </tr>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import Cookie from "cookies-ts";
import axios from "axios";
import { number } from "echarts";
const cookie = new Cookie();
const router = useRouter();
const route = useRoute();
const apiurls = import.meta.env.VITE_APP_API_URL_BasicInformationCommon;//5176
const bpiurls = import.meta.env.VITE_APP_API_URL_BasicInformationWrite;//5013
const cpiurls = import.meta.env.VITE_APP_API_URL_RBACCommon;//5214
const dpiurls = import.meta.env.VITE_APP_API_URL_RBACWrite;//5268
const epiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227
const fpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementWrite;//5020

const form1 = reactive({
  //出库信息弹出框
  dialogTableVisible111: false
});
onMounted(() => {
  //出库信息显示
  SearchMaterialsShow();
  //映射用户名到操作员文本框里
  loadData();
});
//映射用户名到操作员文本框里
const loadData = () => {
  if (cookie.get("employeeName") != null) {
    form.operator = cookie.get("employeeName") as string;
  }
};

//出库数据查询
const Materials = reactive({
  documentNumber: "", //销售订单号
  documentNumbers: "", //发货单号
  clientName: "", //客户名称
  salesStaff: "", //销售员
  materialName: "", //物料名称
  PageIndex: 1,
  PageSize: 10,
  totalCount: 0,
  pageCount: 0
});
//出库数据显示
const MaterialsShowlist: any = ref([]);
const SearchMaterialsShow = () => {
  axios
    .get(epiurls+"/api/Shipping/ShippingnoteShowHandle", {
      params: {
        xSDocumentNumber: Materials.documentNumber,
        fHDocumentNumber: Materials.documentNumbers,
        customerProfileName: Materials.clientName,
        salesStaff: Materials.salesStaff,
        materialName: Materials.materialName,
        PageIndex: Materials.PageIndex,
        PageSize: Materials.PageSize
      }
    })
    .then((res) => {
      MaterialsShowlist.value = res.data.data;
      Materials.totalCount = res.data.totalCount;
      Materials.pageCount = res.data.pageCount;
      console.log(res.data.data, 1111111111);
    });
};
//分页
const handleSizeChange = (val: number) => {
  Materials.PageSize = val;
  SearchMaterialsShow();
};
const handleCurrentChange = (val: number) => {
  Materials.PageIndex = val;
  SearchMaterialsShow();
};

//引入
const xuan = ref([]);
function handleSelectionchange(val: any) {
  xuan.value = val;
  console.log(xuan.value);
}
function QueDing() {
  localStorage.setItem("selectRows", JSON.stringify(xuan.value));
  form1.dialogTableVisible111 = false;

  if (xuan.value.length > 0) {
    let index = 1;
    loge.healthArray = xuan.value.map((item: any) => {
      form.clientName = item.customerProfileName; //客户名称
      return {
        salesOrderId: index++,
        xsDocumentNumber: item.xsDocumentNumber,//销售订单号
        fhDocumentNumber: item.fhDocumentNumber,//发货单号
        itemBianma: item.itemBianma,// 物料编码
        materialName: item.materialName,// 物料名称
        typeSpecification: item.typeSpecification,// 型号规格
        documentType: item.documentType,// 主计量
        quantity: item.quantity,// 数量
        customerProfileName: item.customerProfileName//客户名称
      };
    });
  }
}

//新增行序号
const numbers = ref(1);
const loge = reactive({
  healthArray: <any>[
    reactive({
      salesOrderId: numbers.value,
      xsDocumentNumber: "", // 销售订单号
      fhDocumentNumber: "", //发货单号
      itemBianma: "", // 物料编码
      materialName: "", // 物料名称
      typeSpecification: "", // 型号规格
      documentType: "", // 主计量
      quantity: 0, // 数量
      BeginNumbere: 0, // 入库数量
      PiHao: "", // 批号
      remark: "", // 备注
      createdOwnerId: cookie.get("employeeName"),
      createdTime: new Date(),
      updatedOwnerId: "",
      updatedTime: new Date(),
      deletedOwnerId: "",
      deletedTime: new Date(),
      isDeleted: true,
      auditor: cookie.get("employeeName"),
      auditDate: new Date()
    })
  ]
});
const aaa = cookie.get("employeeName");
console.log(aaa);
//删除行
const del = () => {
  loge.healthArray.splice(loge.healthArray.length - 1, 1);
  ElMessage.warning({
    message: "删除成功"
  });
};

// 退货通知单表单
const form = reactive({
  returnNumber: "", //单据编号
  documentsDate: "", //单据日期
  documentstatus: "开立", //单据状态
  businessstateId: "正常", //业务状态
  businessTypeId: "普通退货", //业务类型
  operator: "", //     操作员
  warehouseld: "成品仓", //仓库
  clientName: "", //客户名称
  returnReason: "外观问题", //退货原因
  processing: "无", //处理方式
  remark: "" //备注
});

//退货通知单添加
const SalesOrderAdd = () => {
  console.log(loge.healthArray, 222222);//退货物料值

  let healthArrays:any = [];
  loge.healthArray.forEach((item:any) => {
  healthArrays.push({
    Documentnumber: item.xsDocumentNumber, // 销售订单号
    Documentnumbers: item.fhDocumentNumber, //发货单号
    ItemBianma: item.itemBianma, //物料编码
    MaterialName: item.materialName, //物料名称
    Specifications: item.typeSpecification, //型号规格
    Measurenum: item.documentType, //主计量
    ReturnShulnum: item.quantity, //数量
    BeginNumbere: 0, //入库数量
    PiHao: item.piHao, //批号
    Remark: item.remark //备注
  });
});
console.log(healthArrays,3333333);

  let request: any = ref([{}]);
  console.log(111, request);

  var datas = {
    returnNumber: form.returnNumber, //单据编号
    documentsDate: form.documentsDate, //单据日期
    documentstatus: form.documentstatus, //单据状态
    businessstateId: form.businessstateId, //业务状态
    businessTypeId: form.businessTypeId, //业务类型
    operator: form.operator, //     操作员
    warehouseld: form.warehouseld, //仓库
    clientName: form.clientName, //客户名称
    returnReason: form.returnReason, //退货原因
    processing: form.processing, //处理方式
    remark: form.remark, //备注
    refundNoticeMaterials: healthArrays
  };
  axios
    .post(
      fpiurls+"/api/ReturnNoticess/AddReturnNoticeandle",
      datas
    )
    .then((res) => {
      if (res.data.code == 0) {
        ElMessage.success(res.data.msg);
        router.push("/ReturnNotice/ReturnNoticeListView");
      } else {
        ElMessage.error(res.data.msg);
      }
    });
};
</script>

<style scoped>
.scrollbar-flex-content {
  display: flex;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1800px;
  height: 300px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
}
</style>
<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

/* 设置第一行的 td 顶部边框加粗并设置为红色 */
table tr:first-child td {
  border-top: 1px solid #ccc;
  /* 设置顶部边框为3px宽度的红色 */
  padding: 10px;
  text-align: center;
}

/* 设置 td 的样式 */

table td {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 14px;
  height: 60px;
  width: 150px;
  white-space: nowrap;
  /* 防止内容换行 */
}

/* 可选：为 table 添加样式 */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/*______________________________________________________*/

.table-container {
  max-width: 100%;
  overflow-x: auto;
  /* 启用水平滚动 */
  margin: 20px 0;
  /* 设置容器的外边距 */
}

/* :deep(.el-input__wrapper) {
      box-shadow: none;
      text-align: center;
  }
  
  :deep(.el-select__wrapper) {
      box-shadow: none;
  }
  
  ::v-deep(.center-input .el-input__inner) {
      text-align: center;
  } */
</style>
